<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"-->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="slide.css">
    <!--link rel="stylesheet" href="article.css"-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="shortout icon" type="image/x-icon" href="Art_Yoshi_Ultimate.png"/>
    <title>Virginie Exotique</title>
</head>
<body>
    <?php
    include('header&footer/header.php');
    ?>
    <main>
        <div class="slider">
            <input type="radio" name="slide" id="slide-1" checked="">
            <input type="radio" name="slide" id="slide-2">
            <input type="radio" name="slide" id="slide-3">
            <input type="radio" name="slide" id="slide-4">
    
            <div class="slides">
                <div class="slide slide-1">
                    <div class="slide-data">
                        <h1>BIENVENUE DANS</h1>
                        <img src="logo.png"></img>
                    </div>
                </div>
                <div class="slide slide-1">
                    <div class="slide-data2">
                        <img src="express.png"></img>
                        <p class="p-slide">Vous pouvez commandez sur notre site en tout securiter, le produit sera
                            expedier sous 24h.</p>
                    </div>
                </div>
                <div class="slide slide-1">
                    <div class="slide-data2">
                        <img src="slide2.png"></img>
                        <p>Vous pouvez trouver tout, les produits alimentaire, cosmetique dans notre magasin.</p>
                    </div>
                </div>
				<div class="slide slide-4">
                    <div class="slide-data">
                        <h2 class="lyca-pls blacky">Rejoignez<img src="Lycamobile.svg.png"></img></h2>
                        <p class="dtls blacky">plus de <em>16 millions</em> de clients satisfaits dans le monde</p>  
                    </div>
                </div>
            </div>
    
            <div class="arrows arrow-left">
                
                <label for="slide-4">
                    <span><i class="fas fa-angle-left"></i></span>
                </label>
                <label for="slide-1">
                    <span><i class="fas fa-angle-left"></i></span>
                </label>
                <label for="slide-2">
                    <span><i class="fas fa-angle-left"></i></span>
                </label>
                <label for="slide-3">
                    <span><i class="fas fa-angle-left"></i></span>
                </label>
            </div>
    
            <div class="arrows arrow-right">
                <label for="slide-2">
                    <span><i class="fas fa-angle-right"></i></span>
                </label>
                <label for="slide-3">
                    <span><i class="fas fa-angle-right"></i></span>
                </label>
                <label for="slide-4">
                    <span><i class="fas fa-angle-right"></i></span>
                </label>
                <label for="slide-1">
                    <span><i class="fas fa-angle-right"></i></span>
                </label>
            </div>
    
            <div class="dots">
                <label for="slide-1"></label>
                <label for="slide-2"></label>
                <label for="slide-3"></label>
                <label for="slide-4"></label>
            </div>
        </div>
        <!--div class="slider">
            <div class="slide-btn" id="btn-left"><i class="fa-solid fa-chevron-left"></i></div>
            <div class="slides" id="#slides">
                <slide><img src="slide1.jpg" alt=""></slide>
                <slide><img src="slide2.jpg" alt=""></slide>
                <slide><img src="slide3.jpg" alt=""></slide>
                <slide><img src="France-local-1-br-new.png" alt=""></slide>
            </div>
            <div class="slide-btn" id="btn-right"><i class="fa-solid fa-chevron-right"></i></div>
        </div-->
        <div class="title-new">
            <h2 class="text-block-container__headline" id="np"><a href="#np">Nouveau produits</a></h2>
        </div>
        <div class="select-case">
            <div class="card pr1">
                <div class="card__content">
                    <h3 class="card__title">Produit Roumain</h3>
                    <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, reprehenderit! Neque
                    consequatur velit...</p>
                    <a href="" class="btn">voir plus</a>
                </div>
            </div>
            <div class="card pr2">
                <div class="card__content">
                    <h3 class="card__title">Produit en conserve</h3>
                    <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, reprehenderit! Neque
                    consequatur velit...</p>
                    <a href="" class="btn">voir plus</a>
                </div>
            </div>
            <div class="card pr3">
                <div class="card__content">
                    <h3 class="card__title">Produit cosmetique</h3>
                    <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, reprehenderit! Neque
                    consequatur velit...</p>
                    <a href="" class="btn">voir plus</a>
                </div>
            </div>
            <div class="exemple">
                <div class="image-art">
                    <img src="img pr/salmon-1238662.jpg" alt="">
                </div>
            </div>
            <!--div class="left">
                <div class="image-art">
                    <img src="https://cdn.pixabay.com/photo/2016/11/18/19/01/paris-1836415_1280.jpg" alt="">
                </div>
            </div-->
            <div class="card pr4">
                <div class="card__content">
                    <h3 class="card__title">Boisson</h3>
                    <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, reprehenderit! Neque
                    consequatur velit...</p>
                    <a href="" class="btn">voir plus</a>
                </div>
            </div>
            <div class="card pr5">
                <div class="card__content">
                    <h3 class="card__title">Epice</h3>
                    <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, reprehenderit! Neque
                    consequatur velit...</p>
                    <a href="" class="btn">voir plus</a>
                </div>
            </div>
            <div class="card pr6">
                <div class="card__content">
                    <h3 class="card__title">Biscuit</h3>
                    <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, reprehenderit! Neque
                    consequatur velit...</p>
                    <a href="" class="btn">voir plus</a>
                </div>
            </div>
            <div class="exemple" style="background-color:#a18a96;width:91.83%;/*92.51%;95.23%;*/height:420px;margin: 25px;border-radius: 20px;">
                <div class="image-art">
                    <img src="img pr/eggs-1510449.jpg" alt="">
                </div>
            </div>
            <div class="card pr7">
                <div class="card__content">
                    <h3 class="card__title">Prodiut laitier</h3>
                    <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, reprehenderit! Neque
                    consequatur velit...</p>
                    <a href="" class="btn">voir plus</a>
                </div>
            </div>
            <div class="card pr8">
                <div class="card__content">
                    <h3 class="card__title">Café</h3>
                    <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, reprehenderit! Neque
                    consequatur velit...</p>
                    <a href="" class="btn">voir plus</a>
                </div>
            </div>
            <div class="card pr9">
                <div class="card__content">
                    <h3 class="card__title">Fruit et legume</h3>
                    <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, reprehenderit! Neque
                    consequatur velit...</p>
                    <a href="" class="btn">voir plus</a>
                </div>
            </div>
        </div>
        <!--div class="select-case">
            <div class="select">
                <div class="card">
                    <img src="2019985-delikat-specialized-pui-5000x5000.png.rendition.767.767.png" alt="" class="card__img">
                    <div class="card__data">
                        <h2 class="card__title">Produit Roumain</h2>
                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                        <a href="#" class="card__btn">Voir plus</a>
                    </div>
                </div>
    
                <div class="card">
                    <img src="" alt="" class="card__img">
                    <div class="card__data">
                        <h2 class="card__title">Lorem ipsum dülür.</h2>
                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                        <a href="#" class="card__btn">Voir plus</a>
                    </div>
                </div>
                <div class="card">
                    <img src="" alt="" class="card__img">
                    <div class="card__data">
                        <h2 class="card__title">Lorem ipsum dülür.</h2>
                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                        <a href="#" class="card__btn">Voir plus</a>
                    </div>
                </div>
            </div>
            <div class="select">
                <div class="card">
                    <img src="" alt="" class="card__img">
                    <div class="card__data">
                        <h2 class="card__title">Lorem ipsum dülür.</h2>
                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                        <a href="#" class="card__btn">Voir plus</a>
                    </div>
                </div>
    
                <div class="card">
                    <img src="" alt="" class="card__img">
                    <div class="card__data">
                        <h2 class="card__title">Lorem ipsum dülür.</h2>
                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                        <a href="#" class="card__btn">Voir plus</a>
                    </div>
                </div>
                <div class="card">
                    <img src="" alt="" class="card__img">
                    <div class="card__data">
                        <h2 class="card__title">Lorem ipsum dülür.</h2>
                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                        <a href="#" class="card__btn">Voir plus</a>
                    </div>
                </div>
            </div>
            <div class="select">
                <div class="card">
                    <img src="" alt="" class="card__img">
                    <div class="card__data">
                        <h2 class="card__title">Lorem ipsum dülür.</h2>
                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                        <a href="#" class="card__btn">Voir plus</a>
                    </div>
                </div>
    
                <div class="card">
                    <img src="" alt="" class="card__img">
                    <div class="card__data">
                        <h2 class="card__title">Lorem ipsum dülür.</h2>
                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                        <a href="#" class="card__btn">Voir plus</a>
                    </div>
                </div>
                <div class="card">
                    <img src="" alt="" class="card__img">
                    <div class="card__data">
                        <h2 class="card__title">Lorem ipsum dülür.</h2>
                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                        <a href="#" class="card__btn">Voir plus</a>
                    </div>
                </div>
            </div>
        </div-->
        <!--div class="">
            <ul class="">
                <li class="nav-btn">
                    <a href="Catalogue.HTML"><strong>FAQ</strong></a>
                </li>
            </ul>
        </div-->
        <div class="about">
            <ul class="nav-ul">
                <li class="nav-btn">
                    <a href=""><strong>Contacter-Nous</strong></a>
                </li>
                <li class="nav-btn">
                    <a href=""><strong>FAQ</strong></a>
                </li>
                <li class="nav-btn">
                    <a href=""><strong>Magasin</strong></a>
                </li>
            </ul>
        </div>
    </main>
    <?php
    include('header&footer/footer.php');
    ?>
    <!--script src="app.js"></script-->
    <script src="sl.js"></script>
    <script type="text/javascript">
        var counter = 1;
        setInterval(function(){
          document.getElementById('slide-' + counter).checked = true;
          counter++;
          if(counter > 4){
            counter = 1;
          }
        }, 5000);
        </script>
</body>
</html>